<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab选项卡</title>
		<script src="../jquery/jquery-3.7.1.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: content-box;
			}
			ul {
				list-style: none;
			}
			a {
				color: #000;
				text-decoration: none;
				float: left;
			}
			#table {
				width: 500px;
				/* 居中 */
				margin: 0 auto;
				border: 1px solid #e0e0e0;
			}
			
			#header {
				height: 50px;
			}
			
			#header a {
				width: 20%;
				text-align: center;
				line-height: 50px;
			}
			
			.header a {
				background-color: #e0e0e0;
			}
			
			/* 预定义选中之后的样式 */
			.selected a {
				background-color: whitesmoke;
			}
			
			#content {
				width: 100%;
				height: 120px;
			}
			
			.dom {
				margin-top: 10px;
				margin-left: 10px;
			}
			
			.dom a {
				width: 50%;
				padding: 20px 0;
				text-align: center;
			}
		</style>
		<script>
			$(document).ready(function() {
				/* 隐藏所有的内容块，然后显示第一个 */
				$('.dom').hide().eq(0).show()
				// $('#header a').eq(0).click(function() {
				// 	/* 隐藏所有的内容块，然后显示第一个 */
				// 	$('.dom').hide().eq(0).show()
				// })
				// $('#header a').eq(1).click(function() {
				// 	/* 隐藏所有的内容块，然后显示第二个 */
				// 	$('.dom').hide().eq(1).show()
				// })
				// $('#header a').eq(2).click(function() {
				// 	/* 隐藏所有的内容块，然后显示第三个 */
				// 	$('.dom').hide().eq(2).show()
				// })
				// $('#header a').eq(3).click(function() {
				// 	/* 隐藏所有的内容块，然后显示第四个 */
				// 	$('.dom').hide().eq(3).show()
				// })
				// $('#header a').eq(4).click(function() {
				// 	/* 隐藏所有的内容块，然后显示第五个 */
				// 	$('.dom').hide().eq(4).show()
				// })
				/* let定义循环变量，它具有块级作用域 */
				for(let i = 0; i < $('#header a').length; i++ ) {
					/* 循环5次，每次添加一个click */
					$('#header a').eq(i).click(
						function() {
							// console.log(i) // 5
							/* 切换内容 */
							$('.dom').hide().eq(i).show()
							/* 切换按钮的背景 */
							$('#header li')
							.removeClass('selected')
							.eq(i).addClass('selected')
						}
					)
				}
				// console.log(i) // 循环定义的let i未找到
			})
		</script>
	</head>
	<body>
		<div id="table">
			<!-- 头部 -->
			<div id="header">
				<ul class="header">
					<li class="selected">
						<a href="#">1</a>
					</li>
					<li>
						<a href="#">2</a>
					</li>
					<li>
						<a href="#">3</a>
					</li>
					<li>
						<a href="#">4</a>
					</li>
					<li>
						<a href="#">5</a>
					</li>
				</ul>
			</div>
			<!-- 内容 -->
			<div id="content">
				<div class="dom">
					<ul>
						<li><a href="#">我是第一个选项卡的内容1</a></li>
						<li><a href="#">我是第一个选项卡的内容2</a></li>
						<li><a href="#">我是第一个选项卡的内容3</a></li>
						<li><a href="#">我是第一个选项卡的内容4</a></li>
					</ul>
				</div>
				<div class="dom">
					<ul>
						<li><a href="#">我是第二个选项卡的内容1</a></li>
						<li><a href="#">我是第二个选项卡的内容2</a></li>
						<li><a href="#">我是第二个选项卡的内容3</a></li>
						<li><a href="#">我是第二个选项卡的内容4</a></li>
					</ul>
				</div>
				<div class="dom">
					<ul>
						<li><a href="#">我是第三个选项卡的内容1</a></li>
						<li><a href="#">我是第三个选项卡的内容2</a></li>
						<li><a href="#">我是第三个选项卡的内容3</a></li>
						<li><a href="#">我是第三个选项卡的内容4</a></li>
					</ul>
				</div>
				<div class="dom">
					<ul>
						<li><a href="#">我是第四个选项卡的内容1</a></li>
						<li><a href="#">我是第四个选项卡的内容2</a></li>
						<li><a href="#">我是第四个选项卡的内容3</a></li>
						<li><a href="#">我是第四个选项卡的内容4</a></li>
					</ul>
				</div>
				<div class="dom">
					<ul>
						<li><a href="#">我是第五个选项卡的内容1</a></li>
						<li><a href="#">我是第五个选项卡的内容2</a></li>
						<li><a href="#">我是第五个选项卡的内容3</a></li>
						<li><a href="#">我是第五个选项卡的内容4</a></li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>